/*
 * @Author: wurangkun
 * @Date: 2024-07-13 19:50:36
 * @LastEditTime: 2024-08-30 23:00:10
 * @LastEditors: wurangkun
 * @FilePath: \my-app\app\pages\list\index.tsx
 * @Description: 
 */
import { ListView } from "@ant-design/react-native";

import { View, Text, FlatList, TouchableOpacity, RefreshControl } from 'react-native'
import React, { useEffect, useRef } from 'react'
import { ScreenBar } from "@/components/ScreenBar";
import { Stack } from "expo-router";
import { SafeAreaView } from "react-native-safe-area-context";
import Paging from "@/components/paging";
import Page from "@/components/page";

export default function List() {
  const a = Array.from({ length: 5 }, (value, index) => `item -> ${index + 1}`);
  // const a = []
  const [rowData, setRowData] = React.useState<string[]>(a);

  const sleep = (time: number) => new Promise<void>(resolve => setTimeout(() => resolve(), time));
  const onFetch = async (current: number, size: number, complete: (v: string[]) => void) => {
    console.log(current, size)
    try {
      let skip = current;

      let data = Array.from({ length: size }, (value, index) => `item -> ${index + skip}`);

      await sleep(2000);
      setRowData([...rowData, ...data])
      complete(data)
    } catch (err) {
      // abortFetch(); //manually stop the refresh or pagination if it encounters network error
      console.log(err);
    }
  };

  const renderItem = (item: any, index: any) => {
    //write your own layout in list view
    return <TouchableOpacity onPress={() => onPress(index, item)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  };

  const onPress = (index: any, item: any) => {
    // Alert.alert(index, `You're pressing on ${item}`);
  };
  return (
    <Page title='列表'>
      {/* <View style={{ flex: 1, backgroundColor: "#f6f7f9" }}> */}
      <Paging
        keyExtractor={(item, index) => `${index}`}
        list={rowData}
        renderItem={({ item, index }) => (
          <TouchableOpacity onPress={() => onPress(item, index)}>
            <View style={{ height: 80, width: '100%', backgroundColor: 'red' }}>
              <Text style={{ color: '#333' }}>{index + 1}</Text>
            </View>
          </TouchableOpacity>
        )}
        // auto={false}
        query={onFetch}
      ></Paging>

      {/* <FlatList
        keyExtractor={(item, index) => `${layout}-${item}-${index}`}
        data={rowData}
        renderItem={({ item, index }) => (
          <TouchableOpacity onPress={() => onPress(item, index)}>
            <View style={{ height: 80, width: '100%', backgroundColor: 'red' }}>
              <Text style={{ color: '#333' }}>{item}</Text>
            </View>
          </TouchableOpacity>
        )}
        onEndReached={onFetch}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        ListFooterComponent={
          <>
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Text>jahjah</Text>
            </View>
            <SafeAreaView edges={['bottom']} />
          </>
        }
      /> */}

      {/* <ListView
        ref={listView}
        onFetch={onFetch}
        keyExtractor={(item, index) => `${layout} - ${item}`}  //this is required when you are using FlatList
        // refreshableMode="advanced" //basic or advanced
        renderItem={renderItem}  //this takes two params (item, index)
        numColumns={1} //to use grid layout, simply set gridColumn > 1

      //----Extra Config----
      // header={this.renderHeaderView}
      // paginationFetchingView={this.renderPaginationFetchingView}
      //paginationFetchingView={this.renderPaginationFetchingView}
      //paginationAllLoadedView={this.renderPaginationAllLoadedView}
      //paginationWaitingView={this.renderPaginationWaitingView}
      //emptyView={this.renderEmptyView}
      //separator={this.renderSeparatorView}
      /> */}

      {/* </View > */}
    </Page>
  )
}